תמיד רציתם להטיל צל (חיצוני/פנימי) מאלמנטים/טקסט ולא ידעתם איך? פעם התחשק לכם ליצור הרבה גבולות סביב אלמנט כלשהו ולא יכולתם יותר מ-2 (border ו-outline)? אתם יותר ממוזמנים לקרוא את המדריך הבא, שיסביר לכם בפירוט איך לעשות את כל אלה באמצעות קוד CSS נקי.
box-shadow - הטלת צל (או צללים) מאלמנט
נתחיל עם התכונה box-shadow, שבאמצעותה ניתן להטיל צל מאלמנטים.
במהלך הדוגמאות בחלק הזה של המדריך ילווה אותנו div שקוד ה-CSS שלו (נכון לעכשיו) הוא:
text-align: center;
width: 200px;
height: 80px;
background-color: #005300;
padding: 40px;
color: #FFFFFF;
width: 200px;
height: 80px;
background-color: #005300;
padding: 40px;
color: #FFFFFF;
כרגע הוא נראה כך:
שלושת הערכים הבסיסיים של box-shadow
ל-box-shadow יש שלושה ערכים בסיסיים ושלושה ערכים אופציונאליים.
אם משתמשים רק בערכים הבסיסיים, הערך הראשון הוא המיקום האופקי (-) של הצל מהאלמנט, הערך השני הוא המיקום האנכי (|) של הצל מהאלמנט והערך השלישי הוא צבע הצל. כך זה נראה:
box-shadow: horizontal-position vertical-position shadow-color;
(ההסבר מחולק לחלקים, עוד מעט הכל יהיה ברור.)
כדי להסביר על המרחק האופקי והאנכי של הצל מהאלמנט, נתחיל מזה שהצל עצמו הוא בגודל של האלמנט שקיבל את התכונה box-shadow. כל מה שאנחנו צריכים לעשות זה להזיז אותו לצד הימני/שמאלי (אופקי) של האלמנט ולצידו העליון/תחתון (אנכי).
כדי להזיז את הצל ימינה, נכניס בערך הראשון מספר חיובי (בצירוף px) המציין את כמות הפיקסלים שעל הצל לזוז ימינה. כדי להזיז אותו שמאלה, נכתוב מספר שלילי (בצירוף px) המציין את כמות הפיקסלים שעל הצל לזוז שמאלה. באותו אופן, על מנת להזיז את הצל מטה, נכניס בערך השני מספר חיובי (בצירוף px) המציין את כמות הפיקסלים שעל הצל לזוז מטה, או מספר שלילי (בצירוף px) המציין את כמות הפיקסלים שעל הצל לזוז מעלה.
בתור דוגמה, ניתן לדיב (div) שלנו את קוד ה-CSS הבא:
box-shadow: 10px 5px #5C915C;
באמצעות השורה הזאת בעצם אמרנו לצל שנמצא "מאחורי" הדיב לזוז 10 פיקסלים ימינה, 5 פיקסלים מטה, ולהיות בצבע #5C915C. הוא ייראה כך עכשיו:
כעת ניתן לדיב שלנו את קוד ה-CSS הבא:
box-shadow: -10px 5px #5C915C;
כמו שניתן לראות בתמונה הבאה, הגדרות הצל הן כמו אלה שבדוגמה הקודמת, מלבד המרחק האופקי של הצל מהאלמנט - שעכשיו הוא 10 פיקסלים שמאלה.
טשטוש צל האלמנט באמצעות box-shadow
box-shadow מקבל ערך נוסף (אופציונאלי), שהוא טשטוש הצל, ובעצם - מרחק טשטוש הצל. סדר הערכים ב-box-shadow יהיה עכשיו כך:
box-shadow: horizontal-position vertical-position blur-distance shadow-color;
הדיב החביב שלנו יקבל עכשיו את קוד ה-CSS הבא:
box-shadow: 5px 5px 5px #5C915C;
ועכשיו סוף סוף הצל ייראה כמו שצל אמור להיראות:
נזכור שהצל תמיד נמצא מאחורי האלמנט, כך שהוא יצליח "לפלוש" גם לצד השמאלי ולצד העליון של הדיב לאחר שניתן לו את קוד ה-CSS הבא:
box-shadow: 10px 10px 40px #5C915C;
מכיוון שמרחק הטשטוש שהגדרנו לצל כל כך גבוה, הוא מופיע (כמובן שבגודל קטן יחסית) גם בצד העליון ובצד השמאלי של הדיב. אם לא נרצה שזה יקרה, נוכל להזיז את הצל קצת יותר ימינה ומטה (או להקטין את מרחק הטשטוש), ובעצם לוותר על רמה גבוהה כזו של טשטוש.
אם כבר מדברים על זה, איך אנחנו יכולים לומר לצל להופיע ביותר משני צִדי האלמנט? בשביל זה יש ערך נוסף ב-box-shadow.
תוספת לגודל צל האלמנט באמצעות box-shadow
ל-box-shadow יש ערך נוסף (אופציונאלי), שהוא מרחק התפשטות הצל, כלומר תוספת לגודל הצל. אחרי הכל, הצל הוא בגודל של האלמנט, אבל מה אם אנחנו רוצים להגדיל אותו?
בשביל להגדיר את גודל הצל עלינו לכתוב גם את מרחק הטשטוש שלו, כך שאם לא נרצה טשטוש - פשוט נכתוב 0px במקום המיועד להגדרת מרחק הטשטוש.
כשרוצים להגדיר גם את התפשטות הצל, סדר הערכים שמקבל box-shadow יהיה כך:
box-shadow: horizontal-position vertical-position blur-distance spread shadow-color;
אז יש לנו דיב עם קוד ה-CSS הבא:
box-shadow: 10px 10px #5C915C;
והוא נראה כך:
ניתן לגודל הצל תוספת בסך חמישה פיקסלים (חשוב לזכור שהתוספת היא לכל הכיוונים):
box-shadow: 10px 10px 0px 5px #5C915C;
מישהו מסוגל לחשוב איך הצל של הדיב ייראה עכשיו? בדיוק, אנו נראה שהוא "זז" חמישה פיקסלים נוספים ימינה ומטה, ונוכל גם לראות (בצד ימין) שהוא התרחב ב-5 פיקסלים בקצה העליון שלו, ובצד התחתון נוכל לראות שהוא התרחב ב-5 פיקסלים שמאלה. מה שבעצם קרה זה שהצל גדל בחמישה פיקסלים לכל צד.
נרחיב אותו בחמישה פיקסלים נוספים:
box-shadow: 10px 10px 0px 10px #5C915C;
איך הוא ייראה עכשיו? תסתכלו בתמונה הבאה:
צל מכל צדי האלמנט באמצעות box-shadow
אוקיי, כל זה חביב ונחמד, אבל איך אנחנו אנחנו שמים את הצל בכל הצדדים באופן שווה, בתוספת של טשטוש יפה?
זה מאוד פשוט. תחילה נאמר לצל להישאר במקום, לא לזוז. (ולא, אנחנו לא עומדים לירות בו או משהו כזה...) אחר כך נטשטש אותו קצת ונרחיב אותו (עם דגש על "נרחיב אותו").
box-shadow: 0px 0px 7px 10px #5C915C;
צל פנימי באלמנט באמצעות box-shadow
ל-box-shadow יש ערך אופציונאלי נוסף (ואחרון), וכשהוא מופיע, הוא בעצם אומר לצל להופיע בתוך האלמנט ולא מחוצה לו. לערך הזה קוראים inset. הוא תמיד יהיה הערך האחרון של ה-box-shadow, וניתן להשתמש בו בכל מצב - גם אם לא הוגדרה תוספת לגודל הצל או מרחק טשטוש הצל.
יש לשים לב לכך של-inset לא אכפת מה-padding ומהתוכן של האלמנט - הוא פשוט גורם לצל לדרוס אותם, אם הוא בגודל המתאים (הערכים של היום כל כך אנוכיים...).
נשתמש בדוגמה הקודמת בצירוף ה-inset.
box-shadow: 0px 0px 7px 10px #5C915C inset;
התוצאה:
Multiple Shadows ו-Multiple Outlines באמצעות box-shadow
נשארו לנו רק שני דברים (או אולי דבר אחד?) נוספים בקשר ל-box-shadow, והם Multiple Shadows ו-Multiple Outlines, או בעברית - צללים מרובים ומסגרות (או גבולות, איך שלא תקראו לזה) מרובות.
בעיקרון, אנחנו יכולים ליצור לאלמנט כמות בלתי מוגבלת של צללים. את כולם נכניס למופע אחד של ה-box-shadow, ונפריד ביניהם באמצעות פסיקים. לדוגמה:
box-shadow: 0px 0px 0px 10px #5C915C,
0px 0px 0px 10px #005300,
0px 0px 0px 10px #5C915C;
0px 0px 0px 10px #005300,
0px 0px 0px 10px #5C915C;
מי מצא את הטעות? :)
נכון, אני בעצם רציתי להגדיר שלושה צללים שכל אחד מהם הוא בגודל עשרה פיקסלים לכל צד (ללא טשטוש), אך שכחתי שאני צריך להגדיל ב-10 כל פעם, מכיוון שבעצם לא הרחבתי את הצל השני ואת הצל השלישי, כך שהתוצאה של הקוד שכתבתי תהיה כאילו כתבתי רק את השורה הראשונה [בלי הפסיק בסופה :)].
הייתי צריך לכתוב את הקוד הבא:
box-shadow: 0px 0px 0px 10px #5C915C,
0px 0px 0px 20px #005300,
0px 0px 0px 30px #5C915C;
0px 0px 0px 20px #005300,
0px 0px 0px 30px #5C915C;
כך זה ייראה:
יש לי הרגשה שבאמצעות הדוגמה הזאת עניתי גם לגבי ה-Multiple Shadows וגם לגבי ה-Multiple Outlines. :)
דבר אחד אחרון לפני שעוברים לתמיכה של ה-box-shadow בדפדפנים שונים - אני בטוח ששמתם לב שבפוקוס על inputים באתר הזה מופיע מסביבם צל בצבע תכלת. זה באמצעות box-shadow. :)
התמיכה של הדפדפנים הנפוצים ב-box-shadow
ה-box-shadow נתמך בדפדפנים כרום, פיירפוקס החל מגרסה 4, אופרה, אקספלורר החל מגרסה 9 וספארי החל מגרסה 5.1.1.
על מנת להשתמש ב-box-shadow בספארי יש לפנות אליו בתור -webkit-box-shadow, אחרת הוא יתעלם.
אין סיבה להימנע להשתמש ב-box-shadow רק בגלל שזה-שאין-לנקוב-בשמו, מר IE, החליט לא לתמוך בו בגרסאות קצת יותר ישנות. אם מישהו גולש באתר שלכם דרך אחת מהגרסאות המאוסות שלו - הוא פשוט לא יראה את האפקטים המרהיבים, זה הכל.
text-shadow - הטלת צל (או צללים) מטקסט
תכונה דומה ל-box-shadow (עם פחות אפשרויות) קיימת גם להטלת צל (או צללים) מטקסט, והיא נקראת text-shadow.
על התכונה הזו לא נרחיב יותר מדי, כי כבר הרחבנו על האפשרויות הקיימות בה בהקשר ל-box-shadow.
גם ל-text-shadow יש שלושה ערכים בסיסיים, שהם בדיוק כמו ב-box-shadow:
box-shadow: horizontal-position vertical-position shadow-color;
כמו ב-box-shadow, גם לה יש ערך נוסף (אופציונאלי), שהוא מרחק טשטוש הצל:
box-shadow: horizontal-position vertical-position blur-distance shadow-color;
בניגוד ל-box-shadow, אין לה את הערך inset (שהוא חסר שימוש בטקסט) וגם את הערך שאחראי על התפשטות הצל.
הטלת צל לכל צדי הטקסט באמצעות text-shadow
כשהיינו רוצים להטיל צל לכל הצדדים ב-box-shadow, היינו משתמשים בערך שאחראי על התפשטות הצל. ב-text-shadow פשוט נאמר לצל לא לזוז, ונגדיל את מרחק הטשטוש שלו מספר פעמים (כדי שהטשטוש בעצם לא יהיה מטושטש, כי המטרה שלנו היא בעצם להרחיב את הצל).
לדוגמה:
text-shadow: 0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300;
0px 0px 5px #005300,
0px 0px 5px #005300;
אם נרצה לחזק עוד יותר את הצל, נוכל להוסיף עוד Blur Distances:
text-shadow: 0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300;
0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300,
0px 0px 5px #005300;
כך זה ייראה:
התמיכה של הדפדפנים הנפוצים ב-text-shadow
בכללי, ההיתמכות של התכונה text-shadow קצת פחות טובה מזו של ה-box-shadow; היא נתמכת בכל הדפדפנים הנפוצים מלבד אקספלורר בכל הגרסאות שלו (שזה אומר - כרום, פיירפוקס, ספארי ואופרה), אבל שוב - זה לא צריך למנוע מכם להשתמש ב-text-shadow. :)
הייתי מעוניין לציין שכתבתי את המדריך הזה לאחר צפייה בהרצאה של Lea Verou ב-Fronteers 2011 (שווה צפייה).
זה הכל לפעם הזאת. שיהיה לכם יום/ערב נעים, ו... נתראה במדריך הבא. :)
תגובות לכתבה:
מדריך חמוד (:
כל הכבוד!!
ללא ספק מדריך מצויין, למדתי מלא דברים חדשים כל שני האלמנטים האלה. תודה רבה לך תמשיך כך ושיהיה לך בהצלחה.
אשמח אם תכתוב מדריכי JS :)
אוראל, מדריך נחמד, ישר כח..!
בשמחה. :)
תודה. ^_^ האמת היא שב-JS אני קצת פחות מבין, אבל אשתדל לכתוב בקרוב מדריכי HTML5, CSS3 ו-JS מ-א' עד ת' (כמעט). :)
שכחתי להוסיף למדריך שהערך שאחראי על תוספת לגודל הצל יכול לקבל גם מספר פיקסלים שלילי, מה שיכול ליצור אפקט מאוד נחמד שראיתי שהרבה בלוגים מבזבזים עליו תמונות. ^_^
:)
עוד דבר קטן: אפשר לעשות דבר דומה ל-box-shadow גם ב-IE מתחת לגרסה 9 עם הפילטרים שלו (http://hedgerwow.appspot.com/demo/shadow) וגם כמה אפשרויות דומות ל-text-shadow (http://heygrady.com/blog/2011/03/10/css-text-shadows-in-internet-explorer), אבל זה יותר מדי חומר לפה, אז... אתם מוזמנים לקרוא (ואולי בהמשך זה ייכנס למדריך על הפילטרים של IE).
טנק'ס
מגניב. השתמשתי בזה כעת לאיזה אתר של לקוח שאין לו עיצוב פיקס. נראה אם יאהב.
אמיר סימן טוב
http://css3maker.com/ מומלץ בחום
תודה רבה, אחלה אתר. :)
זו ההזדמנות לציין שצריך להיזהר עם מחוללי קוד, כי אין בהם את כל האפשרויות, ולפעמים זה יוצר קוד לא תקני. שימוש בתוכנות כמו דרימוויבר, רחמנא ליצלן, הוא הצד הקיצוני של התגלמות הרוע של מחוללי הקוד.
חיפשתי דרך לעשות צל פנימי גם באקספלורר ולא מצאתי, למישהו יש הצעה?
או שתשתמש בתמונה או שתעזוב את זה ככה. אם מישהו משתמש בדפדפן מיושן, בהחלט ייתכן שזה לא ממש יפריע לו... :)